<template>
  <el-row>
    <basic-container>
      <p style="text-align: center; font-size: 28px;">{{ schoolName }}</p>
    </basic-container>
    <basic-container>
      <p style="text-align: center; font-size: 20px;">欢迎使用</p>
    </basic-container>
    <!--    <basic-container>-->
    <!--      <avue-data-box :option="dboption"></avue-data-box>-->
    <!--    </basic-container>-->
    <!--    <basic-container>-->
    <!--      <avue-data-progress :option="dpoption"></avue-data-progress>-->
    <!--    </basic-container>-->
    <!--    <basic-container>-->
    <!--      <avue-data-icons :option="dioption"></avue-data-icons>-->

    <!--    </basic-container>-->
    <!--    <basic-container>-->
    <!--      <el-tabs v-model="activeName">-->
    <!--        <el-tab-pane label="日程" name="first"></el-tab-pane>-->
    <!--        <el-tab-pane label="通知" name="second"></el-tab-pane>-->
    <!--        <el-tab-pane label="消息" name="third"></el-tab-pane>-->
    <!--      </el-tabs>-->
    <!--      <avue-notice @click="handleClick" :data="noticdata" :option="noticeoption" @page-change="pageChange"></avue-notice>-->
    <!--    </basic-container>-->
    <!--    <basic-container>-->


    <!--      <div id="coursesTable" ></div>-->
    <!--&lt;!&ndash;      <div style="text-align: center;">&ndash;&gt;-->
    <!--&lt;!&ndash;        <img src="/img/BG0.png">&ndash;&gt;-->
    <!--&lt;!&ndash;      </div>&ndash;&gt;-->
    <!--    </basic-container>-->

    <!--    <div style="text-align: center;width: 100%">-->
    <!--      <img src="/img/szjys.png" style="width: 99%" @click.stop="gotoMeetting">-->
    <!--    </div>-->
  </el-row>

</template>

<script>

import {getStore,} from "@/util/store";

// import { getDetail} from "@/api/service/js";
// import { getKebiao } from "@/api/service/bjkcsort";
import Timetables from 'timetables';


const timetables = [
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
  ['', '', '', '', '', '', '', '', '', '', '', ''],
];


const highlightWeek = new Date().getDay();

let list = [
  //   {
  //   img: 'https://avuejs.com/images/logo-bg.jpg',
  //   title: '史蒂夫·乔布斯 关注了你',
  //   subtitle: '05-08 15:08',
  //   tag: '已经开始',
  //   status: 0
  // }, {
  //   img: 'https://avuejs.com/images/logo-bg.jpg',
  //   title: '斯蒂夫·沃兹尼亚克 关注了你',
  //   subtitle: '05-08 15:08',
  //   tag: '未开始',
  //   status: 1
  // }, {
  //   img: 'https://avuejs.com/images/logo-bg.jpg',
  //   title: '乔纳森·伊夫 关注了你',
  //   subtitle: '05-08 15:08',
  //   tag: '有警告',
  //   status: 2
  // }, {
  //   img: 'https://avuejs.com/images/logo-bg.jpg',
  //   title: '蒂姆·库克 关注了你',
  //   subtitle: '05-08 15:08',
  //   status: 3,
  //   tag: '有错误'
  // }, {
  //   img: 'https://avuejs.com/images/logo-bg.jpg',
  //   title: '比尔·费尔南德斯 关注了你',
  //   subtitle: '05-08 15:08',
  //   status: 4,
  //   tag: '已完成'
  // }
]

export default {
  data() {
    return {
      schoolName: '向阳花工程心理筛查平台',
      activeName: 'first',
      noticeoption: {
        props: {
          img: 'img',
          title: 'title',
          subtitle: 'subtitle',
          tag: 'tag',
          status: 'status'
        },
      },
      dioption: {
        span: 4,
        animation: false,
        data: [
          {
            title: '今日注册',
            icon: 'el-icon-tickets',
          },
          {
            title: '今日登录',
            icon: 'el-icon-success',
          },
          {
            title: '今日订阅',
            icon: 'el-icon-info',
          },
          {
            title: '今日评论',
            icon: 'el-icon-message',
          },
          {
            title: '今日评论',
            icon: 'el-icon-message',
          },
          {
            title: '今日评论',
            icon: 'el-icon-message',
          }
        ]
      },
      noticdata: list,
      dboption: {
        span: 6,
        data: [
          {
            title: '学生数',
            count: 12332,
            icon: 'el-icon-warning',
            color: 'rgb(49, 180, 141)',
          },
          {
            title: '教师数',
            count: 33,
            icon: 'el-icon-view',
            color: 'rgb(56, 161, 242)',
          },
          {
            title: '开课数',
            count: 2223,
            icon: 'el-icon-setting',
            color: 'rgb(117, 56, 199)',
          },
          {
            title: '志愿活动',
            count: 2223,
            icon: 'el-icon-setting',
            color: 'rgb(117, 56, 199)',
          },
        ]
      },
      dpoption: {
        span: 6,
        data: [
          {
            title: '请假率',
            color: 'rgb(178, 159, 255)',
            count: 32,
          },
          {
            title: '家访率',
            color: 'rgb(230, 71, 88)',
            count: 32,
          },
          {
            title: '作业完成率',
            color: 'rgb(27, 201, 142)',
            count: 56,
          },
          {
            title: '课程完成率',
            color: 'red',
            count: 56,
          }
        ]
      },
    }

  },

  mounted() {
    var userinfo = getStore({
      name: "userInfo",
    });
    if (userinfo.relateId && userinfo.relateId !== '-1') {
      // getDetail(userinfo.relateId).then((res) => {
      //   this.schoolName = res.data.data.schoolName;
      //   getKebiao({jsId:res.data.data.id}).then(res=>{
      //     this.initKebiao(res.data.data);
      //   });
      // });
    }

  },
  methods: {
    gotoMeetting() {
      window.open("https://meeting.kaibujiaoyu.com/", "_blank");
    },
    handleClick(item) {
      console.log(item)
      //this.$message.success(JSON.stringify(item))
    },
    pageChange(page, done) {
      setTimeout(() => {
        //this.$message.success('页码' + page)
        this.data = this.data.concat(list);
        done();
      }, 1000)

    },
    initKebiao(list) {
      for (var i in list) {
        var kc = list[i];
        var z = Number(kc.kcZhou) - 1;
        var j = Number(kc.kcJie) - 1;
        var n = kc.kcJieNum;
        timetables[z][j] = kc.kcName;
        if (n > 1) {
          for (var ii = 1; ii < n; ii++) {
            j = j + 1;
            timetables[z][j] = kc.kcName;
          }
        }
      }
      new Timetables({
        el: '#coursesTable',
        timetables: timetables,
        highlightWeek: highlightWeek,
        merge: false,
        week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        timetableType: [
          ['上午', 4],
          ['下午', 4],
          ['晚上', 4]
        ],
        gridOnClick: function (e) {
          console.log(e.name + '  ' + e.week + ', 第' + e.index + '节课, 课长' + e.length + '节')
        },
      });
    }
  }
};
</script>

<style>
#coursesTable {
  /*padding: 15px 10px;*/
}

.Courses-head > div {
  text-align: center;
  font-size: 14px;
  line-height: 28px;
}

.left-hand-TextDom, .Courses-head {
  background-color: #f2f6f7;
}

.Courses-leftHand {
  background-color: #f2f6f7;
  font-size: 12px;
}

.Courses-leftHand .left-hand-index {
  color: #9c9c9c;
  margin-bottom: 4px !important;
}

.Courses-leftHand p {
  text-align: center;
  font-weight: 900;
}

.Courses-leftHand > div {
  padding-top: 5px;
  border-bottom: 1px dashed rgb(219, 219, 219);
}

.Courses-leftHand > div:last-child {
  border-bottom: none !important;
}

.left-hand-TextDom, .Courses-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.Courses-content > ul {
  border-bottom: 1px dashed rgb(219, 219, 219);
  box-sizing: border-box;
}

.Courses-content > ul:last-child {
  border-bottom: none !important;
}

.highlight-week {
  color: #02a9f5 !important;
}

.Courses-content li {
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 50px;
}

.stage_1, .left-hand-1 {
  /*background-color: #FF6666;*/
}

.stage_2, .left-hand-2 {
  /*background-color: #3399CC;*/
}

.stage_3, .left-hand-3 {
  /*background-color: #66CCCC;*/
}

.Courses-leftHand {
  border-right: 1px solid #e0e0e0;
  color: #303133;
}

.Courses-leftHand > div {
  writing-mode: vertical-lr;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  letter-spacing: 10px;
}

</style>
